<template>
  <div class="admin-center">
    <el-card>
      <h2>管理中心</h2>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card>
            <h3>订单管理</h3>
            <el-button type="primary" @click="goOrderManage">进入订单管理</el-button>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card>
            <h3>商品管理</h3>
            <el-button type="primary" @click="goProductManage">进入商品管理</el-button>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card>
            <h3>管理员信息</h3>
            <div>用户名：{{ adminInfo.username }}</div>
            <div>权限：管理员</div>
            <el-button type="danger" @click="logout">退出登录</el-button>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()
const adminInfo = ref({
  username: localStorage.getItem('phone') || '管理员'
})

const goOrderManage = () => {
  router.push('/admin/orders')
}
const goProductManage = () => {
  router.push('/admin/products')
}
const logout = () => {
  localStorage.clear()
  ElMessage.success('已退出登录')
  router.push('/houlogin')
}
</script>

<style scoped>
.admin-center {
  max-width: 1000px;
  margin: 40px auto;
}
</style>